<template>
       <div class="animated fadeIn">
        <Card>
    <Row>
        <Col span="6">角色：
            <Input v-model="name" placeholder="请输入..." style="width:200px"/>
        </Col>
        <Col span="8">
            <Button type="primary" shape="circle" icon="ios-search" @click="gopage()">搜索</Button>
        </Col>
    </Row>
    <br>
    <Row>
        <Button type="primary" icon="plus-round" @click="addRole()">新建</Button>
        <Button type="success" icon="wrench" @click="edit()">修改</Button>
        <Button type="error" icon="trash-a" @click="remove()">删除</Button>
    </Row>
    <br>
    <Row>
        <Table border :columns="columns1" :data="data1" @on-selection-change="s=>{change(s)}"></Table>
    </Row>
    <br>
    <Row>
        <Page :total="totalCount" :page-size="pageSize" :current="pageNo" @on-change="gopage"
              align="center"></Page>
    </Row>

    <Modal
            v-model="addModal"
            title="添加角色"
            :mask-closable="false"
            :loading="loading"
            @on-ok="add"
            @on-cancel="cancel"
            width="60%">
        <Form ref="addForm" :model="addForm" :rules="ruleCustom" :label-width="80">
            <Row>
                <Col span="11">
                    <FormItem label="角色名字" prop="name">
                        <Input type="text" v-model="addForm.name"/>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center"/>
                <Col span="11">
                    <FormItem label="备注" prop="remark">
                        <Input type="text" v-model="addForm.remark"/>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="11">
                    <FormItem label="排序号" prop="orderNo">
                        <Input type="text" v-model="addForm.orderNo"/>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center"/>
            </Row>
            <Row>
                <Col span="24">
                        <FormItem label="模块" >
                            <ul id="addTree" class="ztree" style="background-color: #3dbd7d;width: 90%"></ul>
                        </FormItem>
                </Col>

            </Row>
        </Form>
    </Modal>


    <Modal
            v-model="updateModal"
            title="编辑角色"
            :mask-closable="false"
            :loading="loading"
            @on-ok="update"
            @on-cancel="cancel"
            width="60%">
        <Form ref="updateForm" :model="updateForm" :rules="ruleCustom" :label-width="80">

            <Row>
                <Col span="11">
                    <FormItem label="角色名字" prop="name">
                        <Input type="text" v-model="updateForm.name"/>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center"/>
                <Col span="11">
                    <FormItem label="备注" prop="remark">
                        <Input type="text" v-model="updateForm.remark"/>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="11">
                    <FormItem label="排序号" prop="orderNo">
                        <Input type="text" v-model="updateForm.orderNo"/>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center"/>
            </Row>

            <Row>
                <Col span="24">
                    <FormItem label="模块" >

                        <ul id="updateTree" class="ztree" style="background-color: #3dbd7d;width: 90%"></ul>

                    </FormItem>
                </Col>

            </Row>

        </Form>
    </Modal>
        </Card>
</div>
</template>

<script type="text/ecmascript-6">
    import fetch from '../../utils/fetch';
    import "ztree/js/jquery-1.4.4.min.js"
    import "ztree/js/jquery.ztree.core.min.js"
    import "ztree/js/jquery.ztree.excheck.min.js"

    import "ztree/css/zTreeStyle/zTreeStyle.css"

    export default {
        data() {
            return {
                loading: true,
                count: 0,
                gourpId: null,
                pageSize: 10,
                pageNo: 1,
                totalPage: 0,
                totalCount: 0,
                name: "",
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '角色名字',
                        key: 'name'
                    },
                    {
                        title: '备注',
                        key: 'remark'
                    },
                    {
                        title: '排序号',
                        key: 'orderNo'
                    }
                ],
                self: this,
                data1: [],
                updateModal: false,
                addModal: false,
                updateForm: {
                    name: "",
                    remark: "",
                    orderNo: ""
                },
                addForm: {
                    name: "test",
                    remark: "test",
                    orderNo: "1"
                },
                ruleCustom: {
                    name: [
                        {required: true, message: '角色名字不能为空', trigger: 'blur'}
                    ]
                    ,
                    remark: [
                        {required: true, message: '备注不能为空', trigger: 'blur'}
                    ]
                },
                 setting : {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                },
                 zNodes :[

                ],
                addZTree:{},
                updateZTree:{}
            }
        },
        methods: {
            change(e) {
                if (e.length == 1) {
                    this.updateForm = e[0];
                }
                this.setGroupId(e);
            },
            setGroupId(e) {
                this.groupId = [];
                this.count = e.length;
                for (var i = 0; i < e.length; i++) {
                    this.groupId.push(e[i].id);
                }
            },
            reset(form) {
                this.$refs[form].resetFields();
            },
            addRole() {
                this.addModal = true;
            },
            add: function () {
                //实现: 添加角色功能
                this.$refs['addForm'].validate((valid)=>{
                    //获取选中的ztree节点
                    let moduleIds = [];
                    //let checkedNodes = this.addZTree.getCheckedNodes();     //获取所有ZTree节点
                    //let checkedNodes = this.addZTree.getCheckedNodes(false);   //获取所有ZTree未选中的节点
                    let checkedNodes = this.addZTree.getCheckedNodes(true);   //获取所有ZTree选中的节点
                    //将checkedNodes数据存储到moduleIds
                    for(let i=0;i<checkedNodes.length;i++){
                        moduleIds.push(checkedNodes[i].id);  //当前节点是
                    }
                    if(valid){
                        fetch({
                            url:'/system/role',
                            method:'post',
                            data:this.addForm,
                            params:{
                                moduleIds:moduleIds
                            }
                        }).then((resp)=>{
                            this.gopage(this.pageNo);
                            this.$refs['addForm'].resetFields();
                            this.$Message.success('添加角色成功!');
                            this.addModal=false;
                        });
                    }
                    else{
                        this.$Message.error('表单验证失败!');
                        setTimeout(()=>{
                            this.loading=false;
                            this.$nextTick(()=>{
                                this.loading=true;
                            });
                        },1000);
                    }
                });


            },
            edit() {
                //实现: 编辑UI
                if(this.count!=1){
                    this.updateModal=false;
                    this.$Message.warning("请至少选择1个角色进行编辑!");
                }
                else{
                    this.updateModal=true;
                    //初始化当前要编辑角色的模块ZTree
                    fetch({
                        url:'/system/module/allZTreeNode/'+this.updateForm.id,
                        method:'get'
                    }).then((resp)=>{
                        //开始初始化
                        this.updateZTree = $.fn.zTree.init($("#updateTree"),this.setting,resp.data);
                    });
                }
            },
            update() {
                //实现:编辑角色功能
                this.$refs['updateForm'].validate((valid)=>{
                        //获取选中的ztree节点
                        let moduleIds = [];
                        let checkedNodes = this.updateZTree.getCheckedNodes(true);   //获取所有ZTree选中的节点
                        //将checkedNodes数据存储到moduleIds
                        for(let i=0;i<checkedNodes.length;i++){
                            moduleIds.push(checkedNodes[i].id);  //当前节点是
                        }
                        if(valid){
                            fetch({
                                url:'/system/role',
                                method:'put',
                                data:this.updateForm,
                                params:{
                                    //moduleIds:moduleIds

                                    //ES6.0新语法, 以下的moduleIds即是参数名,也是变量名, 提交的是变量里存储的值
                                    moduleIds
                                }
                            }).then((resp)=>{
                                this.gopage(this.pageNo);
                                this.$refs['updateForm'].resetFields();
                                this.$Message.success('编辑角色成功!');
                                this.updateModal=false;
                            });
                        }
                        else{
                            this.$Message.error('表单验证失败!');
                            setTimeout(()=>{
                                this.loading=false;
                                this.$nextTick(()=>{
                                    this.loading=true;
                                });
                            },1000);
                        }


               });
            },
            remove() {
                if (this.groupId != null && this.groupId != "") {
                    fetch({
                        url: '/system/role',
                        method: 'delete',
                        data: this.groupId
                    }).then((result) => {
                        if (result.data == '1') {
                            this.$Message.success('Success!');
                            this.gopage(this.pageNo);
                        }
                    });
                } else {
                    this.$Message.warning('请至少选择一项');
                }
            },
            gopage(pageNo) {
                //const pageNo = this.pageNo;
                this.pageNo = pageNo;

                const pageSize = this.pageSize;
                const name = this.name;
                fetch({
                    url: '/system/role',
                    method: 'get',
                    params: {pageNo, pageSize, name}
                }).then((result) => {
                    this.data1 = result.data.list;
                    this.pageNo = pageNo;
                    this.pageSize = pageSize;
                    this.totalCount = result.data.totalCount;
                });
            },
            cancel() {
                this.$Message.info('点击了取消');
            }
        },
        mounted: function () {
            this.gopage();
            //实现:  初始化ztree
            //从服务器获取所有的模块列表
            fetch({
                url:'system/module/allZTreeNode',
                method:'get'
            }).then((resp)=>{
                this.zNodes = resp.data;
                //用zNodes的模块节点数据出初始化ZTree
                //this.addZTree = $.fn.zTree.init(要显示树的控件id, 树的属性设置集合,树的数据集合);
                this.addZTree = $.fn.zTree.init($('#addTree'), this.setting,this.zNodes);
            });


        }
    }





</script>

<style scoped>
    /*@import "/static/ztree/css/zTreeStyle/zTreeStyle.css";*/
</style>
